import React from 'react';
import Swiper from "react-native-swiper";
import {Image, View} from "@gluestack-ui/themed";
import {SwiperImageProps} from "@/components/k-view/swiper-image/type";
import useTool from "@/utils";
import {useQuery} from "@/hooks";
// Swiper属性参考：https://github.com/leecade/react-native-swiper
const SwiperImage = <D extends object, P = any>(props: SwiperImageProps<D, P>) => {
    const {
        radius = 14,
        api,
        dataKey = "data.data",
        imgKey = "address",
        loop = true,
        autoplay = true,
        height = 200,
    } = props;
    const {getObjDeepProps, deObjectKey} = useTool();
    const {data: res, isLoading, Loading} = useQuery(api);
    if (isLoading) return <Loading loading={isLoading}/>
    const data = getObjDeepProps(res, dataKey);
    return (
        <View
            h={height}
        >
            <Swiper
                autoplay={autoplay}
                loop={loop}
                {...deObjectKey(props, ["radius", "api", "dataKey", "imgKey"], true)}
            >
                {Array.isArray(data) && data.map((item, index) => (
                    <Image
                        w="100%"
                        h="100%"
                        borderRadius={radius}
                        source={{uri: item[imgKey]}}
                        key={index}
                        alt={index.toString()}
                    />
                ))}
            </Swiper>
        </View>
    );
};


export default SwiperImage;